import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom'
import { useSelector } from 'react-redux'
import {Pagination, Table, Tag, Button, Input, Modal} from 'antd';
import ContentLayout from "../../components/layout/ContentLayout";
import { useTableData } from '../../hooks/table/useTableData'
import { userDeleteOneApi } from '../../api'
import './user.css'
import {ExclamationCircleOutlined} from "@ant-design/icons";
const { Search } = Input
const { confirm } = Modal
const User = () => {
    const [tableData, setTableData] = useState([])
    const [ ajaxData, setAjaxData  ] = useState({
        page: 1,
        limit: 10,
        username: '',
    })
    const navigate = useNavigate()
    const [ total,setTotal ] = useState(0)
    const { role } = useSelector(state => state.user.userData)
    const { getTableData, loading } = useTableData({ tableUrl: '/user/query',setTableData,setTotal })
    useEffect(() => {
        getTableData(ajaxData)
    },[ajaxData])
    const handleChangePagination = (page,pageSize) => {
        setAjaxData( {
            page,
            limit:pageSize
        })
    }
    const handleToAdd = ()=> {
        // 跳转详情页
        navigate('/users/detail')
    }
    const handleToView = row =>{
        navigate(`/users/detail?page=view&id=${row.userid}`)
    }
    const handleEdit = row => {
        navigate(`/users/detail?page=edit&id=${row.userid}`)
    }
    const deleteUser = row => {
        userDeleteOneApi({ userid: row.userid })
            .then(_ => {
                getTableData(ajaxData)
                window.$message.success('删除成功')
            }).catch(e => {
                window.$message.error(e)
        })
    }
    const onSearch = searchVal => {
        setAjaxData({
            ...ajaxData,
            username: searchVal
        })
    }
    const handleDeleteUser = user => {
        confirm({
            icon: <ExclamationCircleOutlined />,
            title: '提示',
            centered: true,
            content: '确认要删除该用户吗？',
            onOk() {
                deleteUser(user)
            }
        })
    }
    const columns = [
        {
            title: '序号',
            dataIndex: 'index',
            width: 80,
            align: 'center',
        },
        {
            title: '用户名',
            dataIndex: 'username',
            align: 'center',
            render: (text, row) => <a onClick={() => handleToView(row)}>{text}</a>,
        },
        {
            title: '邮箱',
            dataIndex: 'email',
            align: 'center'
        },
        {
            title: '角色',
            dataIndex: 'role',
            align: 'center',
            render: role => <span>{ role ? '超级管理员': '普通用户' }</span>
        },
        {
            title: '状态',
            dataIndex: 'status',
            align: 'center',
            render: status => <Tag color={ status ? 'green': 'volcano' }>{ status ? '已启用' : '已禁用' }</Tag>
        },
        {
            title: '日期',
            dataIndex: 'add_time',
            align: 'center'
        },
        {
            title: '操作',
            align: 'center',
            width: 150,
            render: (_, row) => {
                return (
                   role ? <div className="row-btn">
                        <Button className="btn" size="small" type="primary" onClick={() => handleEdit(row)}>修改</Button>
                        <Button onClick={() => handleDeleteUser(row)} className="btn" size="small" danger type="primary">删除</Button>
                    </div> : <div />
                )
            }
        }
    ];
    return (
        <div style={{ height: '100%',width: '100%' }}>
            <ContentLayout
             searchComp={
                <div  className="top-bar">
                    <div className="btn">
                        { role ? <Button type="primary" onClick={handleToAdd}>新增</Button> : <div />}
                    </div>
                    <div className="search">
                        <Search placeholder="用户名" onSearch={onSearch} enterButton />
                    </div>
                </div>
             }
             mainComp={
                 <Table  rowKey={"userid"} loading={loading} pagination={false} columns={columns} dataSource={tableData} />
             }
             footerComp={
                 <Pagination
                     onChange={handleChangePagination}
                     defaultCurrent={ajaxData.page}
                     showSizeChanger
                     showTotal={(total) => `总计 ${total}条`}
                     total={total} />
             }
            />
        </div>
    )
}
export default User;
